Zum Hauptinhalt springen

標題：SVG 檔案在網站中的優化完整指南
描述：如何正確使用與優化 SVG 檔案，提升網站效能並保持視覺質量
最後更新：2025-06-29
版本：v2.0
作者：rj0217
來源：COVIA官方知識

SVG 檔案在網站中的優化完整指南

什麼是 SVG 檔案？​

SVG (Scalable Vector Graphics) 是基於 XML 的向量圖形格式，與 PNG、JPEG 等點陣圖格式不同，SVG 不會因放大而失真，適合用於網站的標誌、圖標和插圖。

SVG 與網站效能的關係​

SVG 的優勢​

  • 可縮放性：無論尺寸如何，都不會失真
  • 檔案較小：通常比同等視覺效果的高解析度點陣圖小
  • 可互動：支援 CSS 動畫和 JavaScript 互動
  • 可訪問性：可被搜尋引擎識別和讀取

影響 SVG 效能的主要因素​

SVG 的效能影響不主要取決於像素尺寸（如 2736×995），而是：

  1. 路徑複雜度：SVG 中的路徑點數量
  2. 元素數量：圖形中的形狀、路徑、文字等元素總數
  3. 效果使用：濾鏡、漸變、陰影等特效的數量和複雜度

使用 AI 工具生成的 SVG 特性​

使用 Adobe 等 AI 工具生成的 SVG 文件可能存在以下特點：

  • 可能包含大量自動生成的節點和路徑
  • 有時會包含不必要的元數據
  • 可能未經過代碼優化

SVG 優化工具詳解​

SVGOMG - 網頁界面優化工具​

SVGOMG (https://jakearchibald.github.io/svgomg/) 是 SVGO 的網頁界面版本，提供了直觀的使用體驗：

優勢：

  • 拖放式操作，無需安裝軟體
  • 即時預覽優化效果
  • 可選擇性啟用/停用各種優化選項

SVGOMG 設定選項完整詳解​

SVGOMG 提供多種優化選項，以下是完整的功能詳解，分類整理以幫助你做出最佳選擇：

全域設定​
設定功能說明建議
Show original顯示原始 SVG，用於對比優化前後的差異用於比較
Compare gzipped比較壓縮後的檔案大小，更接近實際網頁傳輸大小建議開啟
Prettify markup美化代碼排版，會增加檔案大小關閉以獲得最佳壓縮
Multipass進行多次優化，可以獲得更好的壓縮效果建議開啟
Number precision數值精確度，調低可以減少小數點位數建議設為 2-3
Transform precision變形矩陣精確度，同樣可以調低以提高壓縮率建議設為 3-4
基礎優化選項（低風險）​
設定功能說明建議
Remove doctype移除 DOCTYPE 宣告網頁中通常安全可移除
Remove XML instructions移除 XML 指令網頁中通常不需要
Remove comments移除註釋可安全移除以減少大小
Remove metadata移除中繼資料如不需要作者資訊等可移除
Remove editor data移除編輯器添加的資料安全移除
Clean up attribute whitespace清理屬性中的空白建議開啟
Remove empty attrs移除空屬性建議開啟
Remove empty containers移除空的容器元素建議開啟
Remove empty text移除空白文字節點建議開啟
Remove unused defs移除未使用的定義元素建議開啟
Remove unused namespaces移除未使用的XML命名空間聲明建議開啟
Remove xmlns在非獨立 SVG 檔案中可移除命名空間嵌入HTML時可開啟
Minify colours簡化顏色表示法（如 #FFFFFF → #FFF）建議開啟
Sort attrs對屬性進行排序，提高壓縮效率建議開啟
Sort children of <defs>排序定義區塊的子元素建議開啟
中度優化選項（微小視覺影響）​
設定功能說明建議
Round/rewrite numbers四捨五入數值，減少小數點位數建議開啟
Round/rewrite number lists簡化數值列表，如路徑坐標視情況開啟
Merge styles合併相同的樣式，減少重複建議開啟
Inline styles將樣式內聯化，減少 CSS 區塊建議開啟
Minify styles最小化樣式代碼建議開啟
Style to attributes將樣式轉換為屬性視情況開啟
Remove unknowns & defaults移除未知屬性和預設值建議開啟
Remove unneeded group attrs移除不必要的群組屬性建議開啟
Remove useless stroke & fill移除沒有實際效果的描邊和填充設定建議開啟
Clean up IDs清理和簡化 ID 名稱如不依賴特定ID可開啟
功能性影響選項（謹慎使用）​
設定功能說明建議
Remove <title>移除標題元素影響可訪問性，視情況使用
Remove <desc>移除描述元素影響可訪問性，視情況使用
Remove viewBox移除視圖框不建議開啟，影響響應式顯示
Prefer viewBox to width/height使用 viewBox 代替寬高屬性嵌入網頁時建議開啟
Remove style elements移除樣式元素視情況使用
Remove script elements移除JavaScript移除互動功能
Remove raster images移除內嵌的點陣圖像僅當確定不需要時開啟
路徑和結構優化選項（可能影響視覺效果）​
設定功能說明建議
Merge paths合併相同樣式的相鄰路徑非動畫SVG可開啟
Shapes to (smaller) paths將基本形狀轉換為更小的路徑視情況開啟
Round/rewrite paths簡化路徑數據可開啟但降低精度
Round/rewrite transforms簡化變形矩陣建議開啟
Convert non-eccentric <ellipse> to <circle>將非偏心橢圓轉換為圓形建議開啟
Move attrs to parent group將屬性移至父群組以減少重複視情況開啟
Move group attrs to elements將群組屬性移至個別元素與上一項二選一
Collapse useless groups合併或移除不必要的群組結構建議開啟
Remove hidden elements移除不可見元素建議開啟
Remove out-of-bounds paths移除超出可視區域的路徑視情況開啟
Replace duplicate elements with links將重複元素替換為<use>引用視情況開啟

針對不同類型SVG的優化設定建議​

1. 簡單圖標類

  • 可使用所有基礎優化+中度優化
  • 可降低數值精度至2
  • 建議開啟路徑合併和路徑四捨五入

2. 複雜插圖類

  • 謹慎使用路徑相關優化
  • 保留適當的精度（3-4）
  • 測試路徑合併效果

3. 互動式SVG

  • 保留ID、腳本和樣式元素
  • 謹慎使用結構變更選項

4. 網頁用SVG

  • 開啟「Prefer viewBox to width/height」
  • 移除metadata和編輯器數據
  • 考慮保留title和desc以增強SEO

SVGO - 命令行優化工具​

SVGO (https://github.com/svg/svgo) 是一個開源的 Node.js 命令行工具：

使用場景：

  • 適合開發者自動化工作流程
  • 可集成到建置系統中
  • 適合批量處理多個 SVG 檔案

基本命令：

# 安裝SVGO
npm install -g svgo

# 基本使用
svgo -i input.svg -o output.svg

# 使用設定文件
svgo -i input.svg -o output.svg --config=svgo.config.js

# 批量處理
svgo -f ./icons/ -o ./optimized/

兩者的關係​

SVGOMG 和 SVGO 使用相同的優化引擎，區別在於：

  • SVGO 是命令行工具，適合技術用戶
  • SVGOMG 是網頁界面，適合所有類型的用戶
  • 兩者核心功能相同，只是使用方式不同

SVG 優化最佳實踐​

1. 優化步驟​

  1. 在設計工具中創建或使用 AI 工具生成 SVG
  2. 將 SVG 上傳到 SVGOMG
  3. 調整優化設定：
    • 確保保留 viewBox 屬性
    • 對於互動 SVG，保留必要的 ID 屬性
    • 根據需要保留註釋或分組
  4. 預覽並下載優化後的 SVG

2. 優化效果判斷​

優化效果通常分為以下級別：

  • 顯著優化：減少 30-70% 的檔案大小
  • 中等優化：減少 10-30% 的檔案大小
  • 微小優化：減少不到 10% 的檔案大小

如果優化結果顯示保留率超過 95%（如 15.41k → 14.96k，97.08%），通常表示：

  • SVG 已經相當乾淨和優化
  • 可能是結構簡單的 SVG
  • 主要內容不可進一步優化

3. 在網站中使用 SVG 的代碼示例​

在 Markdown 中：

![標誌說明](/img/logo.svg "標誌標題")

在 HTML 中（帶懶加載）：

<img 
  src="/img/logo.svg" 
  alt="標誌說明" 
  width="100%" 
  height="auto"
  loading="lazy"
/>

作為背景圖像：

.logo-container {
  background-image: url('/img/logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

適合與不適合使用 SVG 的場景​

適合使用 SVG​

  • 標誌和圖標
  • 簡單插圖和圖表
  • 需要互動的圖形
  • 需要動畫效果的元素

謹慎使用 SVG​

  • 極度複雜的場景
  • 照片級真實插圖
  • 需要豐富紋理的圖像
  • 混合內容（如包含照片的組合圖像）

混合內容與替代方案：SVG vs WebP​

混合內容的 SVG 優化困境​

當 SVG 包含複雜的混合內容（如照片背景加向量元素）時，優化效果往往有限：

  • 嵌入的點陣圖（通常以 base64 編碼）佔用大部分空間
  • 結構複雜，自動化工具難以優化
  • 即使優化 SVG 代碼，整體檔案大小變化不明顯

WebP 作為替代方案​

對於混合內容的圖像，WebP 格式可能是更好的選擇：

WebP 的優勢：

  • 同時支援有損和無損壓縮
  • 比 JPEG 小約 25-35%，比 PNG 小約 26%
  • 支援透明度（alpha 通道）
  • 幾乎所有現代瀏覽器都支援

轉換工具：

使用案例：

  • 對於如「LAJIBRO」宣傳圖這類混合照片和向量的複合圖像，使用 WebP 可將 6MB+ 的檔案壓縮至 2MB 左右
  • 適合網站橫幅、產品展示、團隊照片等包含多種元素的大型圖像

混合內容的拆分策略​

如果需要保留 SVG 的互動性，可考慮拆分元素：

<div class="banner-container">
  <!-- 背景照片使用WebP -->
  <img src="background.webp" class="background">
  
  <!-- 純向量元素保留為SVG -->
  <svg class="decorations">
    <!-- 彩帶、星星等裝飾 -->
  </svg>
  
  <!-- 標誌可以單獨優化 -->
  <img src="logo.svg" class="logo">
</div>

總結​

SVG 是網站中非常有用的圖像格式，尤其適合需要清晰度和可縮放性的場景。通過合理優化，SVG 可以在保持視覺質量的同時提升網站效能。但對於混合內容的複雜圖像，WebP 可能是更有效的替代方案。

優化策略建議：

  1. 純向量圖形：首選 SVG，使用 SVGOMG 優化
  2. 照片或真實感圖像：使用 WebP
  3. 混合內容：考慮拆分或直接使用 WebP
  4. 針對不同設備：提供響應式圖像方案

進階補充：大型 SVG 的效能優化策略​

對於必須使用大型、複雜 SVG 的情況，可考慮以下策略：

  1. 延遲加載：

    <img src="placeholder.svg" data-src="large.svg" class="lazyload" alt="描述" />

  2. 分割複雜 SVG：將一個大型 SVG 分割為多個小型 SVG

  3. 考慮使用 <use> 元素：重用 SVG 元素來減少代碼重複

  4. 移除不必要的精確度：減少小數點位數可顯著減小檔案大小

  5. 手動優化頑固 SVG：

    • 用文字編輯器打開 SVG 檔案
    • 尋找並移除大量的 metadata、sodipodi 或 inkscape 相關標籤
    • 簡化路徑數據，特別是小數點後多位數字
    • 考慮將嵌入的 base64 圖像獨立出來

文檔迭代紀錄​

協作夥伴戳記

  1. 向前待考察
  2. 2025/06/29 Claude 3.7 sonnet 4d8d66d6-245e-416b-a33a-a78b30129ce7